<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>预警结果数据</el-breadcrumb-item>
                <el-breadcrumb-item>新型攻击风险预警</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" style="padding-left: 35px;">
            <h3>
                新型攻击风险预警
            </h3>
            <el-row style="margin-top: 40px;">
                <el-form :inline="true" ref="query" :model="query">
                  
                    <el-form-item label="模型URL或模型名称:">
                        <el-input v-model="query.modelName" clearable class="common-input"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="参数(选填):">
                        <el-input v-model="query.api_key" clearable class="common-input"
                            placeholder="请输入"></el-input>
                    </el-form-item>
                  
                    <el-form-item class="leftmargin">
                        <el-button type="primary" size="mini" @click="getData">确定</el-button>
                        <el-button type="info" plain size="mini" @click="handleClean">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row style="margin-top: 5px;" v-if="checkLoaddingFlag">
                <el-col>
                  <p class="yellotxt">已开始检测,请耐心等待</p>
                </el-col>
            </el-row>
            <el-row style="margin-top: 5px;" v-if="checkResult!=null">
                <el-col>
                  <p class="greentxt" v-if="checkSuccess">检测成功</p>
                  <p v-if="!checkSuccess">检测进行中</p>
                </el-col>
                <el-col style="margin-top: 15px;">
                    <h4>检测结果</h4>
                </el-col>
                <el-col style="margin-top: 15px;">
                    <el-table :data="tableData" class="table" style="width: 900px;" align="center" ref="table">
                        <el-table-column prop="warningModel" align="left" label="风险类型">
                            <template slot-scope="scope">
                                <p style="margin-left: 20px;">{{scope.row.name1}}</p>
                                <p style="margin-left: 20px;">{{scope.row.name2}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="score" align="left" label="预警分数">
                        </el-table-column>
                        <el-table-column prop="total" align="left" label="预警结果量化">
                            <template slot-scope="scope">
                                <p>共扫描:{{scope.row.total}}</p>
                                <p>通过:{{scope.row.pass}}</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { fetchData } from '../../api/index';
export default {
    data() {
        return {
            checkLoaddingFlag:false,
            checkResult:null,
            checkSuccess:false,
            tableData:[],
            query: {
                modelName: '',
                api_key: '',
            },

        };
    },
    mounted() {
          this.id = this.$route.query.id;
          if(this.id != '' && this.id != undefined){
            //从列表进入,查询结果,展示结果
            this.queryData();
          }
    },
    methods: {
        showalert() {
          this.$alert('已开始检测, 检测时间预计需要3小时, 您可以在列表页面查看检测状态及结果。', '提示', {
            confirmButtonText: '确定'
          });
        },
        queryData(){
            //从列表进入,查询结果,展示结果
            this.$http.fetchGet('api/warnNewAtack/listOneNewAtack',{
                id:this.id
            }).then(res=>{
                let checkResult = res;
                this.checkLoaddingFlag = false;
                this.checkResult = checkResult;
                this.query={
                    modelName:checkResult.modelName,
                    api_key:''
                }
                if(checkResult.generativeComplianceAuditing!=null && checkResult.generativeComplianceAuditing!= ''){
                    this.checkSuccess = true;
                }
                this.showResult();
            }).catch(err=>{
                console.log(err);
                this.checkLoaddingFlag = false;
                let checkResult = {
                	"id": 25,
                	"generativeComplianceAuditing": "{\"pass\": 704, \"total\": 720}",
                	"outputContentControl": "{\"pass\": 268, \"total\": 305}",
                	"sensitiveInformationLeakage": "{\"pass\": 150, \"total\": 154}",
                	"promptInjection": "{\"pass\": 225, \"total\": 324}",
                	"applicationVulnerability": "{\"pass\": 24, \"total\": 24}",
                	"adversarialAttacks": "{\"pass\": 0, \"total\": 0}",
                	"modelName": "command",
                	"modelParam": null,
                	"resultPath": "abc"
                }
                //展示模型名称 .可能不需要
                this.query={
                    modelName:checkResult.modelName,
                    api_key:''
                }
                this.checkResult = checkResult;
                this.showResult();
            })
        },
        getbean(string){
            // this.checkResult.generativeComplianceAuditing
            if(string == null || string == undefined){
                return {
                    pass:0,
                    total:0,
                }
            }
            let obj = JSON.parse(string.replace(/^["']|["']$/g, '').replace('/',''));
            return obj;
        },
        //解析json 展示结果
        showResult(){
            if(this.checkSuccess){
                this.tableData = [
                    {
                        name1:"生成式合规与审计",
                        name2:"generative compliance auditing",
                        pass: this.getbean(this.checkResult.generativeComplianceAuditing).pass,
                        total: this.getbean(this.checkResult.generativeComplianceAuditing).total,
                        score: (this.getbean(this.checkResult.generativeComplianceAuditing).pass*100 / this.getbean(this.checkResult.generativeComplianceAuditing).total).toFixed(2),
                    },
                    {
                        name1:"输出内容控制",
                        name2:"output content control",
                        pass: this.getbean(this.checkResult.outputContentControl).pass,
                        total: this.getbean(this.checkResult.outputContentControl).total,
                        score: (this.getbean(this.checkResult.outputContentControl).pass*100 / this.getbean(this.checkResult.outputContentControl).total).toFixed(2),
                    },
                    {
                        name1:"敏感信息泄露",
                        name2:"sensitive information leakage",
                        pass: this.getbean(this.checkResult.sensitiveInformationLeakage).pass,
                        total: this.getbean(this.checkResult.sensitiveInformationLeakage).total,
                        score: (this.getbean(this.checkResult.sensitiveInformationLeakage).pass*100 / this.getbean(this.checkResult.sensitiveInformationLeakage).total).toFixed(2)
                    },
                    {
                        name1:"提示注入攻击",
                        name2:"prompt injection",
                        pass: this.getbean(this.checkResult.promptInjection).pass,
                        total: this.getbean(this.checkResult.promptInjection).total,
                        score: (this.getbean(this.checkResult.promptInjection).pass*100 / this.getbean(this.checkResult.promptInjection).total).toFixed(2)
                    },
                    // {
                    //     name1:"模型幻觉",
                    //     name2:"prompt injection",
                    //     pass: this.getbean(this.checkResult.promptInjection).pass,
                    //     total: this.getbean(this.checkResult.promptInjection).total,
                    //     score: (this.getbean(this.checkResult.promptInjection).pass*100 / this.getbean(this.checkResult.promptInjection).total).toFixed(2)
                    // },
                    {
                        name1:"应用泄漏",
                        name2:"application vulnerability",
                        pass: this.getbean(this.checkResult.applicationVulnerability).pass,
                        total: this.getbean(this.checkResult.applicationVulnerability).total,
                        score: (this.getbean(this.checkResult.applicationVulnerability).pass*100 / this.getbean(this.checkResult.applicationVulnerability).total).toFixed(2)
                    },
                    {
                        name1:"对抗攻击",
                        name2:"adversarial attacks",
                        pass: this.getbean(this.checkResult.adversarialAttacks).pass,
                        total: this.getbean(this.checkResult.adversarialAttacks).total,
                        score: (this.getbean(this.checkResult.adversarialAttacks).pass*100 / this.getbean(this.checkResult.adversarialAttacks).total).toFixed(2)
                    }
                ]
            }else{
                this.tableData = [];
                return;
            }
        },
        getData(){
            this.checkLoaddingFlag =true;
            let params = {
                model_name : this.query.modelName,
                model_param: {
                    api_key:this.query.api_key
                }
            }
            console.log(params);
            this.showalert();
            this.$http.postJson('api/sendNewAtack',params).then(res => {
                console.log(res);
                // this.checkLoaddingFlag = false;
                // this.checkResult = res;
                // this.showResult(); //接口能返回就显示
            }).catch(err=>{
                // this.checkLoaddingFlag = false;
                // this.checkResult = {
                //     "id": 0,
                //     "generativeComplianceAuditing": "string",
                //     "outputContentControl": "string",
                //     "sensitiveInformationLeakage": "string",
                //     "promptInjection": "string",
                //     "hallucination": "string",
                //     "applicationVulnerability": "string",
                //     "adversarialattacks": "string",
                //     "modelName": "string",
                //     "modelParam": "string"
                // };
            })


        },
        handleClean(){
            this.query = {
                modelName: '',
                api_key: '',
            }
            this.checkResult = null;
            this.checkLoaddingFlag  =false;
        },
        goback(){
            this.$router.back();
        },
        
    }
};
</script>

<style scoped>
.common-width {
    width: 200px;
}

.common-select {
    width: 350px;
}

.common-input {
    width: 350px;
}

.small-input {
    width: 225px;
}

.table {
    width: 100%;
    font-size: 14px;
}
.label{
    font-size: 14px;
    font-weight: bold;
    color: black;
}
.text{
    font-size: 14px;
    margin-top: 8px;
    color: black;
}
.yellotxt{
    color: #efa83f;
    font-size: 15px;
    margin-top: 8px;
  }
.greentxt{
    color: #67c23a;
    font-size: 15px;
    margin-top: 8px;
  }
.echart {
    width: 600px;
    height: 400px;
    margin-left: 25vh;
}
</style>
